import QtQuick
import QtQuick.Layouts

Item {
    RowLayout {
        id: rootLayout
        anchors.fill: parent
        layoutDirection: Qt.RightToLeft
        property var menues: [
            {title: "بىز كىم", subTitle: "ئالاقىلىشىڭ",  page: "AboutPage/AboutUs.qml"},
            {title: "يۇمشاق دېتال", subTitle: "نەشىر ئۇچۇرلىرى، تەپسىلاتلار",  page: "AboutPage/AboutSoftware.qml"},
        ]
        property int selectedMenuIndex: 0

        Rectangle {
            width: 200
            implicitHeight: parent.height
            color: Qt.alpha("black", 0.1)
            ColumnLayout {
                anchors.fill: parent
                Rectangle {
                    width: parent.width
                    height: 60
                    color: "transparent"
                    Text {
                        text: "About us"
                        anchors.centerIn: parent
                    }
                }
                ListView {
                    id: listView
                    Layout.fillHeight: true
                    width: parent.width
                    model: rootLayout.menues
                    delegate: Rectangle {
                        id: item
                        required property int index
                        required property var modelData
                        property bool isSelected: index == rootLayout.selectedMenuIndex
                        color: Qt.alpha("white", isSelected ? 0.1 : 0)

                        width: listView.width
                        height: 60
                        RowLayout {
                            anchors.fill: parent
                            layoutDirection: Qt.RightToLeft
                            spacing: 10
                            Rectangle {
                                width: item.height - 20
                                height: item.height - 20
                                radius: item.height / 2
                                color: Qt.alpha("black", 0.2)
                            }
                            Item {
                                height: parent.height
                                Layout.fillWidth: true
                                ColumnLayout {
                                    anchors.fill: parent
                                    Text {
                                        Layout.alignment: Qt.AlignRight
                                        text: item.modelData.title
                                    }
                                    Text {
                                        Layout.alignment: Qt.AlignRight
                                        text: item.modelData.subTitle
                                    }
                                }
                            }
                        }
                        MouseArea {
                            anchors.fill: parent
                            onClicked: {
                                rootLayout.selectedMenuIndex = item.index
                            }
                        }
                    }
                }
            }
        }
        Item {
            implicitHeight: rootLayout.height
            Layout.fillWidth: true
            Loader {
                anchors.fill: parent
                source: rootLayout.menues[rootLayout.selectedMenuIndex].page
            }
        }
    }
}
